<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- 引入样式 -->
<link rel="stylesheet" href="${base}/plugin/element/index.css">
<script src="${base}/plugin/vue/vue.js"></script>
<script src="${base}/plugin/element/index.js"></script>
<script src="${base}/js/axios.min.js"></script>

<title>私人导航</title>
</head>
<body>


	<div id="guideDiv">
	   
	    <el-button type="success" @click="modifyItemInit()" icon="el-icon-edit" size="small" >解锁编辑</el-button> 
	    <el-button type="success" @click="addIndexDialog()" icon="el-icon-edit" size="small" >添加分类</el-button> 
	    <el-button type="success" @click="addItemDialogHead()" icon="el-icon-edit" size="small" >添加网站</el-button>
	
	
        <div v-for="(item,i) in itemList" >
            <el-divider content-position="left"  >{{item.indexName}} 
                <el-link type="warning" v-show="modeifyButtonVisible" @click="updateIndexDialog( item )" icon="el-icon-edit" >修改</el-link>
                <el-link type="warning" v-show="modeifyButtonVisible"  @click="delIndex( item.indexId )" icon="el-icon-star-off">删除</el-link>
	            <el-link type="success" @click="addItemDialog( item.indexId )" icon="el-icon-star-off" >添加</el-link>
            </el-divider>
            <el-link v-for="(siteItem,j) in itemList[i].list" :underline="false" type="primary">
                <i class="el-icon-eleme" type="primary" ></i>
                <el-link :href="siteItem.url" target="_blank" type="primary">{{siteItem.siteName}}</el-link>
                <el-link type="warning" v-show="modeifyButtonVisible" @click="updateItemDialog( siteItem )" icon="el-icon-edit" >修改</el-link> 
	            <el-link type="warning" v-show="modeifyButtonVisible"  @click="delItem( siteItem.id )" icon="el-icon-star-off">删除</el-link>
             &nbsp;&nbsp;
            </el-link>
        </div>
        
        
        
        
        
     <el-dialog v-bind:title="dialogTitle" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="dialogForm">
            <el-form-item label="id" prop="id" v-show="false" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off"></el-input>
            </el-form-item>
            
            <el-form-item label="名称:" prop="siteName"  :label-width="formLabelWidth">
                <el-input v-model="form.siteName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="网站:" prop="url" :label-width="formLabelWidth">
                <el-input v-model="form.url" autocomplete="off"></el-input>
            </el-form-item>
            
            <el-form-item label="类型:" prop="type" v-show="false" :label-width="formLabelWidth">
	            <el-input v-model="form.type"></el-input>
		    </el-form-item>	            
            
            <el-form-item label="分类:" prop="guideIndexId" :label-width="formLabelWidth">
                <el-select v-model="form.guideIndexId" autocomplete="off">
                    <el-option
                            v-for="item in guideIndexData"
                            :key="item.id"
                            :label="item.indexName"
                            :value="item.id">
                    </el-option>
			    </el-select>
            </el-form-item>            
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
    
    
   <el-dialog v-bind:title="indexDialogTitle" :visible.sync="indexDialogFormVisible">
        <el-form :model="indexForm" ref="indexDialogForm">
            <el-form-item label="id" prop="id" v-show="false" :label-width="formLabelWidth">
                <el-input v-model="indexForm.id" autocomplete="off"></el-input>
            </el-form-item>
            
            <el-form-item label="名称:" prop="indexName"  :label-width="formLabelWidth">
                <el-input v-model="indexForm.indexName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="排序号" prop="displayOrder" v-show="true" :label-width="formLabelWidth">
                <el-input v-model="indexForm.displayOrder" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="indexDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitIndexForm">确 定</el-button>
        </div>
    </el-dialog>
        
	</div>




	<script type="text/javascript">
	var content = new Vue({
		  el: '#guideDiv',
		  data: {
		          guideIndexData:'',
		          dialogFormVisible: false,
		          dialogTitle: "添加",
		          indexDialogFormVisible: false,
		          indexDialogTitle: "添加",
		          modeifyButtonVisible:false,
		          disabled: false,
		          itemList:'',
		          form: {
		                id:'',
		                siteName: '',
		                url: '',
		                guideIndexId: '',
		                indexName: '',
		                type: '',
		                displayOrder: ''
		            },
			        indexForm: {
		                id:'',
		                indexName: '',
		                type: '',
		                displayOrder: ''
			        },
		            formLabelWidth: '120px',
		            formLabelShortWidth: '30px'
		  },
		  methods: {

		        loadTableData: function () {
			    	  const formParams = new FormData()
			          formParams.append('type', '02')
			          this.noAyncHttp('${base}' + '/guide/list', formParams).then((res) => {
			            this.itemList= res.data
			          }, (error) => {
			            console.error('出错了', error)
			          })
			        },
		         loadGuideIndexData(){
		                const formParams = new FormData()
		                formParams.append('type', '02')
		                this.noAyncHttp('${base}/guide/guideIndex/findByType', formParams).then(
		                        (res)=>{
		                        this.guideIndexData = res.data
		                    }, (error)=>{
		                        console.error('出错了', error)
		                    }
		                )
		         },   
			     noAyncHttp (url, params) {
			  		  return new Promise(function (resolve, reject) {
			  		    axios
			  		      .post(url, params)
			  		      .then((response) => {
			  		        resolve(response.data)
			  		        }
			  		      )
			  		      .catch((error) => { // 请求失败处理
			  		        reject(error)
			  		      })
			  		  })
			  	  },
			  	 addIndexDialog(){
			  		this.indexDialogFormVisible = true;
			  		this.indexDialogTitle= "添加";
			  		this.indexForm.type = '02';
			  		this.indexForm.id = '';
			  		this.indexForm.indexName = '';
			  		this.indexForm.displayOrder = 1;
			  	 },
			  	 updateIndexDialog( item ){
				  		this.indexDialogFormVisible = true;
				  		this.dialogTitle= "修改";
				  		this.indexForm.id = item.indexId;
				  		this.indexForm.indexName = item.indexName;
				  		this.indexForm.type = item.type;
				  		this.indexForm.displayOrder = item.displayOrder;
				  },			  	 
			     submitIndexForm() {
	                    var obj = {};
	                    if (this.indexForm.id) {
	                    	  obj['id'] = this.indexForm.id
	                    }
	                    if (this.indexForm.indexName) {
	                        obj['indexName'] = this.indexForm.indexName
	                    }
	                    if (this.indexForm.type) {
	                        obj['type'] = this.indexForm.type
	                    }
	                    if (this.indexForm.displayOrder) {
	                        obj['displayOrder'] = this.indexForm.displayOrder
	                    }
	                    this.noAyncHttp('${base}/guide/guideIndex/saveOrUpdate', obj).then(
	                        (res)=>{
	                        	 if(res.success){
	                                 this.$message({
	                                     type: 'success',
	                                     message: '操作成功!'
	                                 });
	                                 this.indexDialogFormVisible = false
	                                 content.loadTableData();
	                                 content.loadGuideIndexData();
	                             }else{
	                                 this.$message({
	                                     type: 'info',
	                                     message: res.msg
	                                 });
	                             }
	                    }, (error)=>{
	                        console.error('出错了', error)
	                        this.$message({
	                            type: 'info',
	                            message: '操作失败'
	                        });
	                    });
			     },
			  	 delIndex(id){
		                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
		                    confirmButtonText: '确定',
		                    cancelButtonText: '取消',
		                    type: 'warning'
		                }).then(() => {
		                    const formParams = new FormData()
		                    formParams.append('ids', id)
		                    this.noAyncHttp('${base}/guide/guideIndex/del', formParams).then((res)=>{
		                            if(res.success){
		                                this.$message({
		                                    type: 'success',
		                                    message: '删除成功!'
		                                });
		                            	content.loadTableData();
		                            	content.loadGuideIndexData();
		                            }else{
		                                this.$message({
		                                    type: 'info',
		                                    message: res.msg
		                                });
		                            }
		                     }, (error)=>{
		                            console.error('出错了', error)
		                            this.$message({
		                                type: 'info',
		                                message: '删除失败'
		                            });
		                     })

		                }).catch(() => {
		                        this.$message({
		                            type: 'info',
		                            message: '已取消删除'
		                        });
		                });
		         },
			  	 addItemDialog(indexId){
			  		this.dialogFormVisible = true;
			  		this.dialogTitle= "添加";
			  		this.form.guideIndexId = indexId;
			  		this.form.type = '02';
			  		this.form.id = '';
			  		this.form.siteName = '';
			  		this.form.url ='';
			  	 },
			  	 addItemDialogHead(){
				  		this.dialogFormVisible = true;
				  		this.dialogTitle= "添加";
				  		this.form.guideIndexId = '';
				  		this.form.type = '02';
				  		this.form.id = '';
				  		this.form.siteName = '';
				  		this.form.url ='';
				 },
			  	 modifyItemInit(){
			  		 if(this.modeifyButtonVisible){
				  		 this.modeifyButtonVisible = false;
			  		 }else{
			  			 this.modeifyButtonVisible = true;
			  		 }

			  	 },
			     submitForm() {
	                    var obj = {};
	                    if (this.form.id) {
	                    	  obj['id'] = this.form.id
	                    }
	                    if (this.form.siteName) {
	                        obj['siteName'] = this.form.siteName
	                    }
	                    if (this.form.url) {
	                        obj['url'] = this.form.url
	                    }
	                    if (this.form.guideIndexId) {
	                        obj['guideIndexId'] = this.form.guideIndexId
	                    }
	                    if (this.form.type) {
	                        obj['type'] = this.form.type
	                    }
	                    if (this.form.displayOrder) {
	                        obj['displayOrder'] = this.form.displayOrder
	                    }
	                    this.noAyncHttp('${base}/guide/website/saveOrUpdate', obj).then(
	                        (res)=>{
	                        	 if(res.success){
	                                 this.$message({
	                                     type: 'success',
	                                     message: '操作成功!'
	                                 });
	                                 this.dialogFormVisible = false
	                             	 content.loadTableData();
	                             	 content.loadGuideIndexData();
	                             }else{
	                                 this.$message({
	                                     type: 'info',
	                                     message: res.msg
	                                 });
	                             }
	                    }, (error)=>{
	                        console.error('出错了', error)
	                        this.$message({
	                            type: 'info',
	                            message: '操作失败'
	                        });
	                    });
			     },
			  	 updateItemDialog( siteItem ){
			  		this.dialogFormVisible = true;
			  		this.dialogTitle= "修改";
			  		this.form.id = siteItem.id;
			  		this.form.guideIndexId = siteItem.guideIndexId;
			  		this.form.type = siteItem.type;
			  		this.form.siteName = siteItem.siteName;
			  		this.form.url = siteItem.url;
			  	 },
			  	 delItem(id){
		                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
		                    confirmButtonText: '确定',
		                    cancelButtonText: '取消',
		                    type: 'warning'
		                }).then(() => {
		                    const formParams = new FormData()
		                    formParams.append('ids', id)
		                    this.noAyncHttp('${base}/guide/website/del', formParams).then((res)=>{
		                            if(res.success){
		                                this.$message({
		                                    type: 'success',
		                                    message: '删除成功!'
		                                });
		                            	content.loadTableData();
		                            	content.loadGuideIndexData();
		                            }else{
		                                this.$message({
		                                    type: 'info',
		                                    message: res.msg
		                                });
		                            }
		                     }, (error)=>{
		                            console.error('出错了', error)
		                            this.$message({
		                                type: 'info',
		                                message: '删除失败'
		                            });
		                     })

		                }).catch(() => {
		                        this.$message({
		                            type: 'info',
		                            message: '已取消删除'
		                        });
		                });
		            }
			  	 
			  	 
		     }
		})
	
	
	content.loadTableData();
	content.loadGuideIndexData();
</script>	
</body>
</html>